<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>
    <meta name="MobileOptimized" content="320"/>
    <!-- BEGIN GLOBAL MANDATORY STYLES -->
    <link href="../../resources/plugins/bootstrap/css/bootstrap.min.css" th:href="@{/resources/plugins/bootstrap/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
    <link href="../../resources/css/style.css" th:href="@{/resources/css/style.css}" rel="stylesheet" type="text/css"/>
    <link href="../../resources/css/style-metronic.css" th:href="@{/resources/css/style-metronic.css}" rel="stylesheet" type="text/css"/>
    <link href="../../resources/plugins/font-awesome/css/font-awesome.min.css" th:href="@{/resources/plugins/font-awesome/css/font-awesome.min.css}" rel="stylesheet" type="text/css"/>
    <link href="../../resources/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css" th:href="@{/resources/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css}" rel="stylesheet"
          type="text/css"/>
    <script src="../../resources/plugins/jquery-1.10.2.min.js" th:src="@{/resources/plugins/jquery-1.10.2.min.js}" type="text/javascript"></script>
    <script src="../../resources/plugins/bootstrap/js/bootstrap.js" th:src="@{/resources/plugins/bootstrap/js/bootstrap.js}" type="text/javascript"></script>


    <style>

        .main-checkOut {
            float: left;
            width: 72%;
            height: 600px
        }

        .list-checkOut {
            float: left;
            width: 23%;
            border: 2px solid #3d3d3d;
            height: 600px
        }

        .payList {
            margin-left: 20px;
            width: 95%;
            border: 1px solid #3d3d3d;
            height: 525px
        }

        .payItem {
            height: 80%;
            border: 1px solid #3d3d3d;
            overflow-y: scroll;

        }

        .payPrice {
            width: 100%;
            float: right;
            height: 20%;
            border: 1px solid #3d3d3d;
        }

        .btnBlack {
            display: inline-block;
            background: #000;
            color: #FFF;
            font-size: 13px;
            line-height: 22px;
            text-transform: uppercase;
            border: none;
            outline: none;
            transition: 0.2s;
            -webkit-transition: 0.2s;
            -moz-transition: 0.2s;
            -o-transition: 0.2s;
        }

        .goodsNumber {
            width: 25px
        }

        .goodsNameList {
            margin-left: 2px;
            width: 70px;
        }

        .goodsNumberList {
            margin-left: -80px;

        }

        .deleteList {
            margin-left: 4px;

            margin-right: 2px
        }

        #loginPayForAll {
            width: 200px;
            background-color: #E02222;
            color: #fff;
            margin-top: 30px;
            margin-right: 58px;
            float: right
        }

        .sumPriceLabel {
            color: #FF0033;
            margin-top: 30px;
            float: left;
            margin-left: 58px;
            font-size: 26px;
            font-family: "黑体"
        }

        .xLabel {
            color: #FF0033;
            margin-top: 2px;
            margin-left: 18px;
            font-size: 26px;
            font-family: "黑体"
        }

        .showGoodsPrice {
            color: #FF0033;
            margin-top: 2px;
            margin-left: 58px;
            font-size: 26px;
            font-family: "黑体"
        }

        .showGoodsNumber {
            color: #FF0033;
            margin-top: 2px;
            margin-left: 18px;
            font-size: 26px;
            font-family: "黑体"
        }

        .showGoodsName {
            color: #FF0033;
            margin-top: 2px;
            margin-left: 300px;
            font-size: 26px;
            font-family: "黑体";
            padding-right: 40px;
        }

        .showList {
            overflow-y: scroll;
            height: 93%
        }
    </style>


</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body>

<!--第二层模态框-->

<div class="modal fade" id="secondModal" tabindex="-1" role="dialog" aria-hidden="true" aria-labeledby="modalTitle" style="margin-top:200px">
    <div class="modal-dialog">
        <div class="modal-content">
            <!--商品总价-->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <center><h4 class="modal-title" style="font-family:'黑体'" >商品原价:<label id="preSumPrice" style="color:#E02222;font-size:22px">100.0</label>元</h4></center>
            </div>

            <center>
                <div class="modal-body">
                    <label id="notMemberNote" style="font-size:18px;font-family:'黑体';padding-bottom:-20px">尊贵的<label id="memberRank" style="color:#E02222;font-size:22px">1</label>级会员，您享有<label id="countRank" style="color:#E02222;font-size:22px">1</label>折，现仅需支付：</label>
                    <label style="color:#E02222;font-size:18px;font-family:'黑体';font-size:22px" id="priceAfterCount">100.00</label>

                </div>
            </center>

            <div class="modal-footer" style="margin-top:-10px">
                <input id="clear" type="button" value="点击支付" class="btnBlack" />
            </div>
        </div>
    </div>
</div>


<div class="page-content">
    <h3 class="page-title" style="margin-top:22px">
        收银
        <small>系统</small>
    </h3>
    <hr/>
    <div class="row">
        <div class="main-checkOut">
            <div style="margin-left:15px;padding-right:20px;margin-top:-35px;margin-bottom:-20px">
                　　　　　　
                <table class="table">
                    　　　　　　　
                    <tr>
                        　　　　　　
                        <th>输入商品编号：</th>
                        　　　　　　　
                    </tr>
                    　　　　　　　
                    <tr bgcolor="#e7e9e9">
                        　　　　　　
                        <td><input type="text" id="goodsISBN" name="goodsNumber" maxlength="13"/></td>
                        　　　　　　
                        <td><input id="btnSearch" class="btnBlack" type="button" value="查询"/></td>
                        　　　　　　　
                    </tr>
                    　　　　　　
                </table>
                　　　
            </div>
            <div class="payList">
                <div class="payItem">


                    <!--填充用-->


                </div>


                <div class="payPrice">
                    <label class="sumPriceLabel">总价：¥&nbsp;<p id="sumPrice" style="float:right">0.00</p></label>
                    <input type="button" id="loginPayForAll" value="结账" class="btn btn-inverse" data-toggle="modal"
                           data-target="#idMember"/>
                    <!--模态框-->
                    <div class="modal fade" id="idMember" tabindex="-1" role="dialog" aria-hidden="true"
                         aria-labeledby="modalTitle" style="margin-top:200px">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <!--商品总价-->
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                                            ></button>
                                    <center>
                                        <h4 class="modal-title" style="font-family:'黑体'">商品总价:
                                            <lable id="sumPriceModal" style="color:#E02222;font-size:18px">100.0</lable>
                                            元
                                        </h4>
                                    </center>
                                </div>

                                <center>
                                    <div class="modal-body">
                                        <input type="radio" name="isMember" value="isMember" id="isMemberRadio"/>会员
                                        <input type="radio" name="isMember" value="notMember" id="isNotMemberRadio"
                                               style="margin-left:10px"/>非会员
                                        <label id="memberPhoneNumber"
                                               style="display:none;margin-top:10px;margin-bottom:-10px">会员手机号：<input
                                                type="text" name="memberPhoneNumber" id="telephone"/></label>
                                    </div>
                                </center>

                                <div class="modal-footer">
                                    <input id="checkAll" type="button" value="结算" class="btnBlack"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>


        <div class="list-checkOut" style="margin-top:20px">
            <p style="margin-top:10px;margin-left:10px;font-size:14px;height:3%"><i class="fa fa-won"
                                                                                    style="padding-right:5px"></i>商品列表：
            </p>
            <hr style="border:#3d3d3d solid 1px;height:0.1%"/>
            <div class="showList">


                <!--填充用-->


            </div>


        </div>
    </div>
</div>


</body>
<script src="../../resources/plugins/bootstrap/js/bootstrap.js" th:src="@{/resources/plugins/bootstrap/js/bootstrap.js}" type="text/javascript"></script>
<script type="text/javascript">

    // <![CDATA[
    <!--输入数量，改变计算及总价-->
    window.createNumber = {};
    createNumber.i = 0;//全局变量，标识选购物品数量

    $("#clear").click(function() {
        var telephone = $("#telephone").val();

        var productIdArray = [];
        var productNumArray = [];
        $(".checkProductId").each(function (index) {
            productIdArray[index] = $(this).val();
        });
        $(".goodsNumber").each(function (index) {
            productNumArray[index] = $(this).val();
        });

        var paramArray = [];

        for (var i = 0; i < productIdArray.length; i++) {
            var temp = {};
            temp.productId = productIdArray[i];
            temp.productNum = productNumArray[i];
            paramArray[i] = temp;
        }

        var param = {};
        param.checkParam = paramArray;
        if (telephone != null || !telephone.isEmpty) {
            param.phone = telephone;
        }
        $.ajax({
            url: '/goods/check',
            data: {"checkParam": JSON.stringify(param)},
            method: 'post',
            async:false,
            error: function (XMLHttpRequest, textStatus) {
                console.log(XMLHttpRequest.status);
                console.log(XMLHttpRequest.readyState);
                console.log(textStatus);
            },
            success: function (data) {
                //跳转
                window.location.href='/link/checkOut';
            }
        })

    });

    $("#isMemberRadio").click(function () {
        $("#memberPhoneNumber").css("display", "block");
    });

    $("#isNotMemberRadio").click(function () {
        $("#memberPhoneNumber").css("display", "none");
    });

    $("#submitIsMember").click(function(){
        $("#idMember").modal('hide');
    });

    $("#checkAll").click(function () {
        var telephone = $("#telephone").val();
        if (telephone != null || !telephone.isEmpty) {

            $.ajax({
                url:'/goods/checkMemberPhone',
                method:'post',
                data:{'phone':telephone},
                async:false,
                error: function (XMLHttpRequest, textStatus) {
                    console.log(XMLHttpRequest.status);
                    console.log(XMLHttpRequest.readyState);
                    console.log(textStatus);
                    return;
                },
                success: function (result) {
                    if (result == false) {
                        return;
                    }
                }
            })
        }

        var productIdArray = [];
        var productNumArray = [];
        $(".checkProductId").each(function (index) {
            productIdArray[index] = $(this).val();
        });
        $(".goodsNumber").each(function (index) {
            productNumArray[index] = $(this).val();
        });

        var paramArray = [];

        for (var i = 0; i < productIdArray.length; i++) {
            var temp = {};
            temp.productId = productIdArray[i];
            temp.productNum = productNumArray[i];
            paramArray[i] = temp;
        }

        var param = {};
        param.checkParam = paramArray;
        if (telephone != null || !telephone.isEmpty) {
            param.phone = telephone;
        }

        $.ajax({
            url: '/goods/preCheck',
            data: {"checkParam": JSON.stringify(param)},
            method: 'post',
            async:false,
            error: function (XMLHttpRequest, textStatus) {
                console.log(XMLHttpRequest.status);
                console.log(XMLHttpRequest.readyState);
                console.log(textStatus);
            },
            success: function (data) {
                console.log(data);
//                alert(result);
                var result = eval('(' + data + ')');
                $("#idMember").modal('hide');
                $("#secondModal").modal('show');

                var prePrice = result.setPrice;
                var nowPrice = result.sellPrice
                var memberLevel = result.level;
                var count = result.discount;

                $("#preSumPrice").html(prePrice);
                $("#priceAfterCount").html(nowPrice);
                $("#memberRank").html(memberLevel);
                $("#countRank").html(count);

                if (memberLevel == -1) {
                    $("#notMemberNote").html('尊贵的顾客，您不是会员，不享受打折优惠,应支付：');
                }

            }
        })



    })

    function payItemChange() {
        var productPriceArray = [];
        var productNumArray = [];
        $(".showGoodsPrice").each(function (index) {
            productPriceArray[index] = $(this).html();
        });
        $(".goodsNumber").each(function (index) {
            productNumArray[index] = $(this).val();
        });
        var totalPrice = 0.0;
        for (var i = 0; i < productPriceArray.length; i++) {
            totalPrice = totalPrice + productPriceArray[i] * productNumArray[i];
        }
        totalPrice = Math.round(totalPrice*100)/100;
        $("#sumPrice").html(totalPrice);
    }

    $("#loginPayForAll").click(function () {
        var totalPrice = $("#sumPrice").html();
        $("#sumPriceModal").html(totalPrice);

        /*
        var productIdArray = [];
        var productNumArray = [];
        $(".checkProductId").each(function (index) {
            productIdArray[index] = $(this).val();
        });
        $(".goodsNumber").each(function (index) {
            productNumArray[index] = $(this).val();
        });

        var paramArray = [];

        for (var i = 0; i < productIdArray.length; i++) {
            var temp = {};
            temp.productId = productIdArray[i];
            temp.productNum = productNumArray[i];
            paramArray[i] = temp;
        }

//        var param = {};
//        param.checkParam = paramArray;
//        console.log(param.toString());
        $.ajax({
            url: '/goods/check',
            data: {"checkParam": JSON.stringify(paramArray)},
//            data:{"checkParam":paramArray},
//            data:{"checkParam":param},
            method: 'post',
//            contentType:"application/json;charset=utf-8",
            error: function (XMLHttpRequest, textStatus) {
                console.log(XMLHttpRequest.status);
                console.log(XMLHttpRequest.readyState);
                console.log(textStatus);
            },
            success: function (result) {
                alert(result);
            }
        })
        */

    })

    /**
     * 数量变更
     * @param obj
     */
    function inputNumber(obj) {
        var changeGoodsNumber = "showG" + obj.id.split("g")[1];
        document.getElementById(changeGoodsNumber).innerHTML = (obj.value);
        payItemChange();
    }

    /**
     * 查询
     */
    $('#btnSearch').click(function () {
        var goodsISBN = $("#goodsISBN").val();
        var number = /^[0-9]{9,13}$/
        if (!number.test(goodsISBN)) {
            alert("输入商品编号有误！");
            return;
        }
//        console.log(goodsISBN);

        $.ajax({
            url: '/goods/findByISBN',
            method: 'get',
            data: {'goodsNumber': goodsISBN},
            async: true,
            success: function (result) {
//                console.log("success");
                var product = eval('(' + result + ')');
//                console.log(product.toString())
                //拼接填充商品列表字符串
                var insertListHtml = "<ul class='list-inline' >" + "<input type='hidden' class='checkProductId' value='" + product.productId + "'/>" +
                        "<li class='goodsNameList' ><p id='goodsName" + createNumber.i + "' >" + product.productName + "</p></li>" +
                        "<li class='goodsNumberList' style='margin-left:2px'>数量：<input id='goodsNumber" + createNumber.i + "' class='goodsNumber' type='text' value='1' onchange='inputNumber(this)'></li>" +
                        "<li class='deleteList' ><input  id='deleteBtn" + createNumber.i + "' class='btnBlack' type='submit' value='删除' onclick='deleteRow(this)'></li>" +
                        "</ul>";

                //拼接计算界面字符串
                var insertShowHtml = "<div id='showMulti" + createNumber.i + "'><span id='showGoodsPrice" + createNumber.i + "' class='showGoodsPrice'>" + product.setPrice + "</span><label class='xLabel'>x</label><span id='showGoodsNumber" + createNumber.i + "' class='showGoodsNumber'></span><span id='showGoodsName" + createNumber.i + "' class='showGoodsName'></span></div>";

                //填充
                $(".showList").append(insertListHtml);
                $(".showList").scrollTop(999999);
                $(".payItem").append(insertShowHtml);
                $(".payItem").scrollTop(999999);
                $("#showGoodsNumber" + createNumber.i).html($("#goodsNumber" + createNumber.i).val());
                $("#showGoodsName" + createNumber.i).html($("#goodsName" + createNumber.i).html());

                //填充控件+1
                createNumber.i++;

                payItemChange();
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
//                console.log(XMLHttpRequest.status);
//                console.log(XMLHttpRequest.readyState);
//                console.log(textStatus);
            }
        })


    });

    <!-- 删除按钮点击事件-->
    function deleteRow(obj) {
        obj.parentNode.parentNode.remove();
        var createGoodsNumber = "#showMulti" + obj.id.split("n")[1];
        $(createGoodsNumber).remove();
        payItemChange();
    }
    // ]]>

</script>

</html>
